<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link href="res/static/css/main.css" rel="stylesheet" type="text/css">
    <link href="res/layui/css/layui.css" rel="stylesheet" type="text/css">
    <script src="res/layui/layui.js" type="text/javascript"></script>
    <script src="res/static/js/util/jquery-3.3.1.min.js" type="text/javascript"></script>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport">
    <meta content="IE=Edge,chrome=1" http-equiv="X-UA-Compatible">
</head>
<body>

<div class="site-nav-bg">
    <div class="site-nav w1200">
        <p class="sn-back-home">
            <i class="layui-icon layui-icon-home"></i>
            <a href="/">首页</a>
        </p>
        <div class="sn-quick-menu">
            <div class="login"><a href="login.html">已有帐号>请登录</a></div>
        </div>
    </div>
</div>

<div class="header">
    <div class="headerLayout w1200">
        <div class="headerCon">
            <h1 class="mallLogo">
                <a href="index.html" title="商城">
                    <img src="res/static/img/logo.png">
                </a>
            </h1>
        </div>
    </div>
</div>


<div class="content content-nav-base  login-content">

    <div class="login-bg">
        <div class="login-cont w1200">
            <div class="register-box">
                <form action="regist" method="post">
                    <legend>欢迎注册</legend>
                    <div class="form-item">
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-username iphone-icon"></i>
                                <input autocomplete="off" class="layui-input" id="username" lay-verify="required"
                                       name="username" placeholder="请输入用户名" type="tel">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-cellphone iphone-icon"></i>
                                <input autocomplete="off" class="layui-input" id="phone" lay-verify="required|phone"
                                       name="phone" placeholder="请输入手机号" type="tel">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <input autocomplete="off" class="layui-input" id="email" lay-verify="required|email"
                                       name="email" placeholder="请输入邮箱" type="tel">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-password iphone-icon"></i>
                                <input autocomplete="off" class="layui-input" id="password"
                                       lay-verify="required|password"
                                       name="password" placeholder="请输入密码" type="password">
                            </div>
                        </div>
                        <div class="layui-inline iphone">
                            <div class="layui-input-inline">
                                <i class="layui-icon layui-icon-password iphone-icon"></i>
                                <input autocomplete="off" class="layui-input" id="repassword"
                                       lay-verify="required|password"
                                       name="repassword" placeholder="请再次输入密码" type="password">
                            </div>
                        </div>
                        <div class="layui-inline veri-code">
                            <div style="width: 245px; display: inline-block;">
                                <input autocomplete="off" class="layui-input" id="pnum" lay-verify="required"
                                       name="pnum"
                                       placeholder="请输入验证码" type="text">
                            </div>
                            <img alt="验证码" id="captcha" onclick="updateCaptcha()" src="getCaptcha"
                                 style="width: 150px;height: 36px;">
                        </div>
                        <div class="layui-form-item login-btn">
                            <div class="layui-input-block">
                                <input class="layui-btn" lay-filter="demo1" lay-submit="" name="submit"
                                       style="width: 400px; background-color:#FF794E;"
                                       type="submit" value="注册">
                            </div>
                        </div>
                    </div>
                </form>
                <label id="error-msg" style="color:#FF794E;font-size: 15px;"></label>
            </div>
        </div>
    </div>


    <div class="footer">
        <div class="ng-promise-box">
            <div class="ng-promise w1200">
                <p class="text">
                    <a class="icon1" href="javascript:">7天无理由退换货</a>
                    <a class="icon2" href="javascript:">满99元全场免邮</a>
                    <a class="icon3" href="javascript:" style="margin-right: 0">100%品质保证</a>
                </p>
            </div>
        </div>
        <div class="mod_help w1200">
            <p>
                <a href="javascript:">关于我们</a>
                <span>|</span>
                <a href="javascript:">帮助中心</a>
                <span>|</span>
                <a href="javascript:">售后服务</a>
                <span>|</span>
                <a href="javascript:">极品资讯</a>
                <span>|</span>
                <a href="javascript:">关于货源</a>
            </p>
            <p class="coty">极品商城版权所有 &copy; 2012-2020</p>
        </div>
    </div>
</div>
<script type="text/javascript">

    function updateCaptcha() {
        random = new Date().getTime() + '' + Math.floor(Math.random() * Math.pow(10, 8));
        $('#captcha').attr('src', '/getCaptcha?rand=' + random);
    }

    $(function () {

        var username_error = "";
        var phone_error = "";
        var email_error = "";
        var password_error = "";
        var repassword_error = "";
        $("#username").blur(function () {
            if ($("#username").val() == "" || $("#username").val().trim(" ") == "") {
                $("#error-msg").html("用户名不能为空");
                username_error = "用户名不能为空";
            } else {
                $("#error-msg").html("");
                username_error = "";
            }
        });

        $("#phone").blur(function () {
            var reg = /^1[3456789]\d{9}$/;
            if (!reg.test($("#phone").val())) {
                $("#error-msg").html("电话号码格式错误");
                phone_error = "电话号码格式错误";
            } else {
                $.ajax({
                    url: "/checkTel",
                    type: "post",
                    dataType: "json",
                    data: {"phone": $("#phone").val()},
                    success: function (data) {
                        if (data === 1) {
                            $("#error-msg").html("该手机号已被注册");
                            phone_error = "该手机号已被注册";
                        } else {
                            $("#error-msg").html("");
                            phone_error = "";
                        }

                    }
                })

            }
        });


        $("#email").blur(function () {
            var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
            if (!reg.test($("#email").val())) {
                $("#error-msg").html("邮箱格式错误");
                email_error = "邮箱格式错误";
            } else {
                $("#error-msg").html("");
                email_error = "";
            }
        });

        $("#password").blur(function () {
            if ($(this).val() == "") {
                $("#error-msg").html("密码不能为空");
                password_error = "密码不能为空";
            } else if ($(this).val().length < 8) {
                $("#error-msg").html("密码长度小于8位");
                password_error = "密码长度小于8位";
            } else {
                $("#error-msg").html("");
                password_error = "";
            }
        });

        $("#repassword").blur(function () {
            if ($(this).val() != $("#password").val()) {
                $("#error-msg").html("两次输入的密码不一致");
                repassword_error = "两次输入的密码不一致";
            } else {
                $("#error-msg").html("");
                repassword_error = "";
            }

        });
        $("form").submit(function () {
            if ($("#phone-error").text() != "" || username_error != "" || phone_error != "" || email_error != "" || password_error != "" || repassword_error != "")
                return false;
            else if ($("#username").val() == "" || $("#password").val() == "") {
                return false;
            } else
                return true;
        });
    })

</script>


</body>
</html>